<template>
	<view class="container">
		<view class="bgc-box">
			<image src="https://cdsa.stec.sh.cn/stec-platform-doc/img/rBO25mT1eFOEdb9VAAAAAD7e7L4550.png"></image>
		</view>
		<view class="mian-box">
			<view class="user-info-box">
				<view class="user-ico">
					<image :src="imgSrc + userName.photo" mode="" v-if="userName.photo"></image>
					<image src="https://cdsa.stec.sh.cn/stec-platform-doc/img/rBO25mT1ePaEfIU0AAAAAPBVd5I93.webp" mode="" v-else></image>
				</view>
				<view class="user-name">
					<view class="name">{{userName.name||""}}</view>
					<view class="org-name">{{userName.org.name||""}}</view>
				</view>
				<view class="right-ico">
					<u-icon name="arrow-right" color="#fff" size="16"></u-icon>
				</view>
			</view>
			<view class="active-box">
				<view class="active-item" @click="getEditPassword">
					<view class="ico">
						<image src="../../static/image/user/psw.png" mode=""></image>
					</view>
					<view class="name">修改密码</view>
					<view class="right-ico">
						<u-icon name="arrow-right" color="#A7AEBD" size="16"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="active-item">
					<view class="ico">
						<image src="../../static/image/user/user.png" mode=""></image>
					</view>
					<view class="name">通讯录</view>
					<view class="right-ico">
						<u-icon name="arrow-right" color="#A7AEBD" size="16"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="active-item clear-catch">
					<view class="ico">
						<image src="../../static/image/user/clear.png" mode=""></image>
					</view>
					<view class="name">
						<view>清空缓存</view>
						<view class="size">126K</view>
					</view>
					<view class="right-ico">
						<u-icon name="arrow-right" color="#A7AEBD" size="16"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="active-item clear-catch">
					<view class="ico">
						<image src="../../static/image/user/speak.png" mode=""></image>
					</view>
					<view class="name">
						<view>关于应用</view>
						<view class="size">{{version}}</view>
					</view>
					<view class="right-ico">
						<u-icon name="arrow-right" color="#A7AEBD" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="btn-box">
				<u-button type="error" text="退出账号" @click="logout"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import searchCom from "@/components/searchCom.vue"
	export default {
		components: {
			searchCom
		},
		data(){
			return {
				userName:{
					org:{},
				},
				// 版本号
				version: "",
				imgSrc:''
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
				this.version = plus.runtime.version;
			// #endif
			this.imgSrc =this.$config.IMG_FILE_URL
		},
		onShow(){
			this.userName=this.$store.getters.userName||{
					org:{}}
			console.log(this.$store.getters.userName)
		},
		methods:{
			logout(){
				console.log('logoutlogoutlogout')
				//退出登录时清楚上次填写的项目。主要怕各业主选择可选择的项目不一样
				uni.removeStorageSync('defaultForm')
				uni.removeStorageSync('recordInfo')
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},

			// 修改密码
			getEditPassword(){
				uni.navigateTo({
					url: "/subpackage-resetPwd/pages/editPassword"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: calc(100vh - 100rpx);
		padding-top: 165rpx;
		background-color: #F5F7FA;
		box-sizing: border-box;
	/* #ifdef MP-WEIXIN */
		height: calc(100vh - 0rpx);
	/* #endif */
		.bgc-box {
			height: 520rpx;
			background: rgba(16, 48, 90, 0.7);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}

		.mian-box {
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 1056rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.user-info-box {
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.user-ico {
					width: 140rpx;
					height: 100%;
					border-radius: 20rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.user-name {
					width: 500rpx;
					margin-left: 36rpx;

					.name {
						font-size: 56rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 66rpx;
						-webkit-background-clip: text;
					}

					.org-name {
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #DCE4F0;
						line-height: 35rpx;
						-webkit-background-clip: text;
						margin-top: 12rpx;
					}

				}

			}

			.active-box {
				height: 640rpx;
				padding: 28rpx 40rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 88rpx;

				.active-item {
					height: 148rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.ico {
						width: 50rpx;
						height: 50rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						margin-left: 40rpx;
						width: 500rpx;
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #445469;
						line-height: 42rpx;
						-webkit-background-clip: text;
					}
				}

				.clear-catch {
					.name {
						width: 490rpx;
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #445469;
						line-height: 42rpx;
						-webkit-background-clip: text;
						display: flex;
						justify-content: inherit;
					}

					.size {
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #A7AEBD;
						line-height: 42rpx;
						-webkit-background-clip: text;
						margin-right: 32rpx;
					}
				}
			}

			.btn-box {
				margin-top: 40rpx;
			}
		}
	}
</style>
